<template>
	<view class="bagbox">
		<view class="" v-if="isShow">
			购物车空空如也
		</view>
		<view class="" v-else>
			<view class="top">
				<text>全部(20)</text>
				<text>降价(4)</text>
				<text>常买(3)</text>
				<text>分类</text>
			</view>
			<view class="check">
				<view class="xiao">

					<switch @change="" type="checkbox" />
					<text>小U自营</text>
				</view>
				<view class="">
					<text>以免运费</text>
					<text>|</text>
					<text class="lj">领卷</text>
				</view>
			</view>
			<ul>
				<li v-for="(item,i) in list" :key="item.id">
					<view class="shan">
						<!-- <u-icon name="backspace" size="20" @click="del(i)"></u-icon> -->
						<u-swipe-action>
							<u-swipe-action-item :options="options1" @click="del(i)">
								<view class="swipe-action u-border-top u-border-bottom">
									<view class="swipe-action__content">
										<!--     <text class="swipe-action__content__text">基础使用</text> -->
										<view class="li">
											<view class="x">
												<checkbox-group name="">

													<checkbox :checked="item.checked" @click="changeOne(i)" />

												</checkbox-group>
												<!-- <switch @change="" type="checkbox" /> -->
												<image :src="'http://localhost:3000'+ item.img" mode=""></image>
											</view>
											<view class="n">

												<view class="">
													{{item.goodsname}}
												</view>
												<view class="n2">
													敏感肌可用，控油祛痘、男女可...
												</view>
												<view class="n3">
													比加入时降价￥ 100
												</view>
												<view class="g">
													<text>￥{{item.price}}</text>
													<text>￥1111</text>
												</view>
												<view class="j">
													<text @click="jian(item.id,i)">-</text>
													<text>{{item.num}}</text>
													<text @click="jia(item.id,i)">+</text>
												</view>
											</view>

										</view>
									</view>
								</view>
							</u-swipe-action-item>
						</u-swipe-action>
					</view>
				</li>




				<view class="zw">

				</view>
			</ul>
			<view class="bottom">
				<view class="all">
					<checkbox-group name="">
						<checkbox :checked='checkAll' @click="changeAll" />
					</checkbox-group>
					<!-- <switch type="checkbox" @change="" /> -->
					<text>全选</text>
				</view>
				<view class="h">
					<view>
						<text>合计:</text><text class="ja">￥{{sum}}</text>
					</view>
					<view class="yh">
						不含运费，以优惠00元
					</view>

				</view>
				<view class="">
					<button @click="js">去结算（3）</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		cartLists,
		carteDit,
		cartDelete
	} from '../../request/app.js'
	export default {
		data() {
			return {
				options1: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				list: [],
				checkAll: '',
				sum: 0,
				isShow: ''
			}
		},
		computed: {
			all() {
				let sum = 0;
				if (!this.list) return
				this.list.forEach((item) => {
					if (item.checked) {
						sum += item.price * item.num;
						console.log(sum, '总价');
					}
				});
				this.sum = sum;

			},

		},
		onShow() {
			let uid = uni.getStorageSync('userinfo').uid
			cartLists({
				uid: uid
			}).then(res => {
				console.log(res, 'ooooooooo');
				if (res.data.code == 200) {
					this.list = res.data.list ? res.data.list : [];
					if (this.list == '') {
						this.isShow = true
						console.log('11111000000');
					} else {
						this.isShow = false
						console.log('9877554');
					}
					// 通过循环遍历给购物车列表添加参数
					this.list.map((item) => {
						this.$set(item, "checked", false);
					});
				}
			})

			if (this.list == '') {
				this.isShow = true
				console.log('11111000000');
			} else {
				this.isShow = false
				console.log('9877554');
			}

			// console.log(this.isShow,'isshou');
		},


		methods: {
			jian(id, i) {
				console.log(id, '22222222');
				console.log(i, 'iiiiii');
				// console.log(this.list,'list');

				if (this.list[i].num <= 1) {
					this.list[i].num = 1
				} else {
					this.list[i].num--
					carteDit({
						id: id,
						type: 1
					}).then(res => {
						console.log(res, '99999999');
						if (res.data.code == 200) {
							uni.showToast({
								title: '操作成功'
							})
						}
					})
				}


			},
			jia(id, i) {
				this.list[i].num++
				carteDit({
					id: id,
					type: 2
				}).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '操作成功'
						})
					}
				})
			},
			changeOne(i) {
				// console.log(i, '1111111111111');
				// console.log(this.list[i].checked, '222222222');
				this.list[i].checked = !this.list[i].checked
				// console.log(this.list[i].checked, '7777777');
				// console.log(this.checkAll, '111111');
				if (!this.list) return
				this.checkAll = this.list.every(item => item.checked)
				console.log(this.checkAll, '全选');

			},
			changeAll() {
				if (!this.list) return
				this.checkAll = !this.checkAll
				console.log(this.checkAll);

				this.list.map((item) => {
					item.checked = this.checkAll;
				});
				console.log(this.list, '单选');
			},
			del(i) {

				// console.log(i,'11111111');
				let a = this.list[i].id
				cartDelete({
					id: a
				}).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '删除成功',
						})

						let uid = uni.getStorageSync('userinfo').uid
						cartLists({
							uid: uid
						}).then(res => {
							console.log(res, 'ooooooooo');
							if (res.data.code == 200) {
								this.list = res.data.list ? res.data.list : []
								if (this.list == []) return
								// 通过循环遍历给购物车列表添加参数
								this.list.map((item) => {
									this.$set(item, "checked", false);
								});
							}
							if (this.list == '') {
								this.isShow = true
								console.log('11111000000');
							} else {
								this.isShow = false
								console.log('9877554');
							}
						})
					}
				})
			},
			js() {
				if (!this.list) return
				// 用户至少选择一个商品 才跳转
				if (this.list.some(item => item.checked)) {
					// 商品数量
					let num = 0
					// 选中的id
					let val = ''
					// 选中的购物车列表
					let arr = []
					this.list.map(item => {
						if (item.checked) {
							// 计算数量和
							num += item.num
							// id的拼接
							val += `,${item.id}`
							// 选中的商品推送
							arr.push(item)
						}
					})
					let orderInfo = {
						countmoney: this.sum,
						countnumber: num,
						idstr: val.slice(1)
					}
					uni.setStorageSync('orderInfo', orderInfo)
					uni.setStorageSync('arr', arr)
					uni.navigateTo({
						url: '../order/order'
					})
				} else {
					uni.showToast({
						title: '至少选择一件商品去结算'
					})
				}

			},

		}
	}
</script>

<style>
	ul {
		list-style: none;

	}

	.xiao {
		display: flex;
	}

	.zw {
		height: 20rpx;
	}

	.bagbox {
		background-color: #f2f2ff;
	
	}

	.top {
		display: flex;
		justify-content: space-around;
		background-color: #FF6600;
		color: white;
		font-size: 40rpx;
	}

	.check {
		display: flex;
		justify-content: space-between;
		padding: 10rpx;
		background: white;
	}

	.check .lj {
		color: red;
	}

	li {
		padding: 20rpx;
		background-color: white;
		margin-top: 30rpx;
		height: 240rpx;
height: 200rpx;
	}

	.li {
		display: flex;
	}

	.li .x image {
		width: 200rpx;
		height: 200rpx;
		margin-right: 20rpx;

	}

	.li .x {
		display: flex;
		line-height: 200rpx;
	}

	.li .n {
		/* margin-top: 20rpx; */
	}

	.li .n view {
		margin-top: 20rpx;
	}

	.j,
	.g {
		display: inline;
	}

	.j {
		float: right;
	}

	.n .n2 {
		color: #ccc;
	}

	.n .n3 {
		color: #FF6600;
	}

	.g text:nth-child(1) {
		color: #FF6600;
	}

	.g text:nth-child(2) {
		color: #ccc;
		text-decoration: line-through;
	}

	.j text:nth-child(2) {
		background: #ccc;
		padding-left: 30rpx;
		padding-right: 30rpx;

	}

	.bottom {
		width: 100%;
		height: 90rpx;
		display: flex;
		justify-content: space-around;
		background-color: white;
		position: fixed;
		bottom: 0;
		z-index: 100;
	}

	.bottom .all {
		line-height: 90rpx;
	}

	.h .ja {
		color: red;
	}

	.yh {
		color: #ccc;
	}

	button {
		background: #FF6600;
		color: white;
	}

	.shan {
		/* width: 100rpx; */
		float: right;
	}
</style>
